<template>
    <div class="recommend">gtgtgt
        <div v-if="recommends.slider" class="slider-wrapper">
        <slider>
            <div v-for="item in recommends.slider" :key="item.id">
                <a :href="item.linkUrl">
                    <img :src="item.picUrl" alt="">
                </a>
            </div>
        </slider>
        </div>
        <div class="recommend-list">
            <h1 class="list-title">热门歌单推荐</h1>
           
        </div>
    </div>
</template>

<script>
import http, { ERR_OK } from "@/common/js/HTTP";
import slider from "../../base/slider/slider";
export default {
  name: "recommend",
  data() {
    return {
      recommends: ""
    };
  },
  components: {
    slider
  },
  async created() {
    await this._getrecommend();
    console.log(this.recommends);
  },
  methods: {
    async _getrecommend() {
      let data = await http.getindex();
      if (data.code === ERR_OK) {
        this.recommends = data.data;
      }
    }
  }
};
</script>

<style scoped lang="stylus">
    @import "~common/stylus/variable"
    .recommend
        position:  fixed
        width: 100%
        top: 88px
        bottom: 0
        .recommend-content
            height: 100%
            overflow: hidden
            .slider-wrapper
                position: relative
                width: 100%
                overflow: hidden
            .recommend-list
                .list-title
                    height: 65px
                    line-height: 65px
                    text-align: center
                    font-size: $font-size-medium
                    color: $color-theme
                .item
                    display: flex
                    box-sizing: border-box
                    align-items: center
                    padding: 0 20px 20px 20px
                    .icon
                        flex: 0 0 60px
                        width: 60px
                        padding-right: 20px
                    .text
                        display: flex
                        flex-direction: column
                        justify-content: center
                        flex: 1
                        line-height: 20px
                        overflow: hidden
                        font-size: $font-size-medium
                        .name
                            margin-bottom: 10px
                            color: $color-text
                        .desc
                            color: $color-text-d
            .loading-container
                position: absolute
                width: 100%
                top: 50%
                transform: translateY(-50%)
</style>
